<template>
  <section class="h-full bg-gray-100 flex flex-col relative z-10">
    <h2 class="title">更多信息</h2>

    <div
      class="container p-8 pb-4 mx-auto flex flex-col md:flex-row justify-around"
    >
      <div
        class="w-full md:w-2/5 h-48 md:h-64 p-4 md:p-8 bg-white shadow-lg rounded-lg mt-8"
      >
        <h3 class="text-2xl text-center mt-0 mb-4">个人信息</h3>
        <div class="card text-sm md:text-base">
          <p>电话：17513159412</p>
          <p>邮箱：sunyz94123@qq.com</p>
          <p>学历：统招全日制本科</p>
          <p>求职状态：离职，随时到岗</p>
        </div>
      </div>

      <div
        class="w-full md:w-2/5 h-48 md:h-64 p-4 md:p-8 bg-white shadow-lg rounded-lg mt-8"
      >
        <h3 class="text-2xl text-center mt-0 mb-4">求职意向</h3>
        <div class="card text-sm md:text-base">
          <p>期望薪资：郑州(7k)</p>
          <p>期望职位：Web 前端开发</p>
          <p>技术栈：React > Vue3 > Vue2</p>
          <p>项目类型：后台 > uni > 其他 > 小程序</p>
        </div>
      </div>
    </div>

    <div class="w-40 mx-auto flex justify-around items-center pt-16 mt-auto">
      <a :href="i.url" target="_blank" :key="i.url" v-for="i in list">
        <img :src="i.icon" class="w-8 h-8 rounded-full object-cover" alt="" />
      </a>
    </div>

    <div class="text-xs text-center py-8">
      <a
        href="http://docs.chidiao.xin/nav/resume.html"
        target="_blank"
        class="text-blue-500"
      >
        简历简洁版
      </a>
      <span class="mx-2">|</span>
      <a
        href="https://gitee.com/chidiao/resume"
        target="_blank"
        class="text-blue-500"
      >
        简历源码
      </a>
      <p class="mt-2">Copyright © 2023 chidiao.xin</p>
    </div>
  </section>
</template>

<script lang="ts" setup>
let list = [
  {
    url: 'https://codepen.io/chidiao',
    icon: '/imgs/codepen.jpg'
  },
  {
    url: 'https://gitee.com/chidiao',
    icon: '/imgs/gitee.jpg'
  },
  {
    url: 'http://docs.chidiao.xin/',
    icon: '/imgs/docs.jpg'
  }
]
</script>
